{% extends "base.html" %}

{% block content %}
<div class="container">
    <!-- 系统状态栏 -->
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="alert alert-info d-flex justify-content-between align-items-center" id="systemStatus">
                <div>
                    <strong>系统状态:</strong> 
                    <span id="statusMode">传统视觉模式</span> | 
                    <span id="statusDebug">调试模式: 关闭</span> | 
                    <span id="statusCamera">摄像头: 启用</span>
                </div>
                <div>
                    <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#settingsModal">
                        <i class="bi bi-gear"></i> 设置
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 导航标签 -->
    <ul class="nav nav-tabs mb-4" id="mainTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="image-tab" data-bs-toggle="tab" data-bs-target="#image" type="button" role="tab">
                <i class="bi bi-image"></i> 图像识别
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="password-tab" data-bs-toggle="tab" data-bs-target="#password" type="button" role="tab">
                <i class="bi bi-lock"></i> 图形密码锁
            </button>
        </li>
    </ul>

    <!-- 标签内容 -->
    <div class="tab-content" id="mainTabsContent">
        <!-- 图像识别标签 -->
        <div class="tab-pane fade show active" id="image" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="bi bi-upload"></i> 图像输入
                        </div>
                        <div class="card-body">
                            <ul class="nav nav-tabs mb-3" id="inputTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload" type="button" role="tab">
                                        <i class="bi bi-file-earmark-arrow-up"></i> 上传文件
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="camera-tab" data-bs-toggle="tab" data-bs-target="#camera" type="button" role="tab">
                                        <i class="bi bi-camera"></i> 拍照
                                    </button>
                                </li>
                            </ul>
                            
                            <div class="tab-content" id="inputTabsContent">
                                <!-- 文件上传 -->
                                <div class="tab-pane fade show active" id="upload" role="tabpanel">
                                    <form id="imageForm">
                                        <div class="mb-3">
                                            <label for="imageInput" class="form-label">选择图像文件</label>
                                            <input class="form-control" type="file" id="imageInput" accept="image/*">
                                        </div>
                                        <button type="submit" class="btn btn-primary" id="detectBtn">
                                            <i class="bi bi-search"></i> 识别图形
                                        </button>
                                    </form>
                                </div>
                                
                                <!-- 摄像头拍照 -->
                                <div class="tab-pane fade" id="camera" role="tabpanel">
                                    <form id="cameraForm">
                                        <div class="mb-3">
                                            <div id="cameraPreview" class="border rounded" style="height: 300px; display: flex; align-items: center; justify-content: center;">
                                                <div class="text-center text-muted">
                                                    <i class="bi bi-camera-video" style="font-size: 3rem;"></i>
                                                    <p class="mt-2">摄像头预览区域</p>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-secondary" id="startCameraBtn">
                                            <i class="bi bi-camera-video"></i> 打开摄像头
                                        </button>
                                        <button type="submit" class="btn btn-primary" id="captureBtn" disabled>
                                            <i class="bi bi-camera-fill"></i> 拍照识别
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="bi bi-image"></i> 识别结果
                        </div>
                        <div class="card-body">
                            <div id="imageResult">
                                <p class="text-muted">请上传图像或拍照进行识别</p>
                            </div>
                            <div id="imageText" class="mt-3">
                                <h6>识别详情:</h6>
                                <pre class="bg-light p-2" id="resultText">尚未识别任何图形</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图形密码锁标签 -->
        <div class="tab-pane fade" id="password" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="bi bi-lock"></i> 密码输入
                        </div>
                        <div class="card-body">
                            <form id="passwordForm">
                                <div class="mb-3">
                                    <label for="passwordInput" class="form-label">上传包含密码图形的图像</label>
                                    <input class="form-control" type="file" id="passwordInput" accept="image/*">
                                </div>
                                <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                                    <button type="submit" class="btn btn-primary me-md-2" id="checkPasswordBtn">
                                        <i class="bi bi-check-circle"></i> 检查密码
                                    </button>
                                    <button type="button" class="btn btn-secondary" id="resetPasswordBtn">
                                        <i class="bi bi-arrow-repeat"></i> 重置
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="card mt-4">
                        <div class="card-header">
                            <i class="bi bi-info-circle"></i> 解锁进度
                        </div>
                        <div class="card-body">
                            <div class="shape-sequence mb-3" id="sequenceDisplay">
                                <!-- 密码序列将通过JavaScript动态加载 -->
                            </div>
                            <div id="passwordStatus">
                                <!-- 状态信息将通过JavaScript动态加载 -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="bi bi-image"></i> 输入图形
                        </div>
                        <div class="card-body">
                            <div id="passwordResult">
                                <p class="text-muted">请上传图像进行密码验证</p>
                            </div>
                            <div id="passwordMessage" class="mt-3 alert" style="display: none;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 设置模态框 -->
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="settingsModalLabel">系统设置</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="settingsForm">
                    <div class="mb-3">
                        <label class="form-label">检测模式</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="detectionMode" id="modeTraditional" value="traditional" checked>
                                <label class="form-check-label" for="modeTraditional">传统视觉</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="detectionMode" id="modeYolo" value="yolo">
                                <label class="form-check-label" for="modeYolo">YOLO</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="debugMode">
                            <label class="form-check-label" for="debugMode">调试模式</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveSettingsBtn">保存设置</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
<script>
// 页面加载完成后获取系统状态
document.addEventListener('DOMContentLoaded', function() {
    loadSystemStatus();
});

// 加载系统状态
function loadSystemStatus() {
    fetch('/get_status')
        .then(response => response.json())
        .then(data => {
            // 更新状态显示
            document.getElementById('statusMode').textContent = data.mode === 'yolo' ? 'YOLO模式' : '传统视觉模式';
            document.getElementById('statusDebug').textContent = '调试模式: ' + (data.debug ? '开启' : '关闭');
            document.getElementById('statusCamera').textContent = '摄像头: ' + (data.camera_enabled ? '启用' : '禁用');
            
            // 设置模态框中的选项
            document.getElementById('modeTraditional').checked = data.mode === 'traditional';
            document.getElementById('modeYolo').checked = data.mode === 'yolo';
            document.getElementById('debugMode').checked = data.debug;
        })
        .catch(error => console.error('获取系统状态失败:', error));
}

// 保存设置
document.getElementById('saveSettingsBtn').addEventListener('click', function() {
    const mode = document.querySelector('input[name="detectionMode"]:checked').value;
    const debug = document.getElementById('debugMode').checked;
    
    fetch('/set_mode', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            mode: mode,
            debug: debug
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 更新状态显示
            document.getElementById('statusMode').textContent = data.mode === 'yolo' ? 'YOLO模式' : '传统视觉模式';
            document.getElementById('statusDebug').textContent = '调试模式: ' + (data.debug ? '开启' : '关闭');
            bootstrap.Modal.getInstance(document.getElementById('settingsModal')).hide();
            alert('设置已保存');
        } else {
            alert('保存设置失败: ' + data.error);
        }
    })
    .catch(error => {
        console.error('保存设置失败:', error);
        alert('保存设置失败: ' + error);
    });
});
</script>
{% endblock %}